<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>货单查询</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="Expires" content="-1" />
<link rel="stylesheet" href="lib/sheet.css" type="text/css" />
<!-- jquery和ui -->
<style>
#autocomplete{ font-size:14px;border: 1px solid black; position: absolute; }
/**//*每行的格式*/
#autocomplete li{ display: block; text-align: left; line-height: 20px; background-color: white; cursor: default; padding: 0 5px; margin:0;clear: both; }
#autocomplete ul{ padding: 0; margin:0; }
/**//*鼠标选中时的格式*/
#autocomplete .selected{ background-color: #36c; color: white; overflow: hidden; }
/**//*鼠标离开时代格式*/
#autocomplete .unselected{ background-color: white; color: black; }
/**//*关键字信息*/
#autocomplete .keyname{ display: block; float: left; }
/**//*关键字扩展信息*/
#autocomplete .keyextend{ display: block; float: right; color: green; }
#autocomplete .unselected .keyextend{ color: green; }
#autocomplete .selected .keyextend{ color: white; }
/**//*关闭*/
#autocomplete .close{ text-align: right; }
#autocomplete .close span{ font-size:10px;color: blue; cursor: pointer; text-decoration: underline; }
</style>
<script type="text/javascript" src="lib/jquery.js"></script>
<script type="text/javascript" src="lib/jquery.autocomplete.js"></script>
<script type="text/javascript">
	$(function() {
		$("#ac").autocomplete("tyr1.asp");
		var j=-1;
		function getkeycode(e){
			var keyc;
			if(window.event){
				keyc=e.keyCode;
			}else if(e.which){
				keyc=e.which;
			}
			return keyc;
		}

		function tyrover(n,mn){
			for(var i=0;i<mn;i++){
				if(i>=0&&i<mn&&i==n){
					$("#ttyr tr").eq(i).addClass("gac_b");	//添加css样式
				}else{
					$("#ttyr tr").eq(i).removeClass("gac_b");	//添加css样式
				}

			}

		}

		$("#tyr").keyup(function(e){
			var tyr=$("#tyr");
			if(getkeycode(e)==13||getkeycode(e)==38||getkeycode(e)==40){
				var	ttr=$("#ttyr tr");
				if(getkeycode(e)==13&&($("#ttyr").css("visibility")=="visible")) {
					//alert(j);
					tyr.val(ttr.eq(j).text());
					j=-1;
					$("#ttyr").css("visibility","hidden");
				}
				if(getkeycode(e)==40){
					j++;
					if(j>=ttr.length) j=0;
					tyr.val(ttr.eq(j).text());
					tyrover(j,ttr.length);
				}else	if(getkeycode(e)==38){
					j--;
					if(j==-1) j=ttr.length-1;
					tyr.val(ttr.eq(j).text());
					tyrover(j,ttr.length);
				}
				return;
			}
			$("#ttyr").css("left",tyr.offset().left).css("top",tyr.offset().top+tyr.outerHeight()-1).width(tyr.outerWidth());	//outerHeight()有margin是否选中的选项，注意！
			//$("#ttyr").css("left",(tyr.offset().left).toString()+"px").css("top",(tyr.offset().top+tyr.height()+5).toString()+"px").css("width",(tyr.width()+6).toString()+"px");	//原先的定位代码
			//		alert(tyr.offset().left);
			//e.preventDefault();
			if(tyr.val().length>0){	//输入框内容大于0就开始查询
				$.get("tyr.asp",{tyr:$(this).val()},function(data){
					if(!data.length){
						j=-1;
						$("#ttyr").css("visibility","hidden");
					}else{
						//alert(data[0].tyr);

						var ttyr="";
						for(var i=0;i<data.length;i++)	//for(var i=0;i<data.length&&i<=10;i++)最多显示10条，也可以通过数据库控制返回最多10条
						{
							ttyr+="<tr><td class='gac_c'>"+data[i].tyr+"</td></tr>";
							//alert(ttyr);
						}
						//alert(ttyr);
						$("#ttyr").html(ttyr).css("visibility","visible");
						$("#ttyr tr").mouseover(function(){	//对返回的dom进行mouseowver事件捕获
							$("#ttyr tr").eq(j).removeClass("gac_b");
							$(this).addClass("gac_b");	//添加css样式
							j=$("#ttyr tr").index($(this));
						}).mouseout(function(){	//对dom进行mouseout事件捕获
							$(this).removeClass("gac_b");	//移除css样式
						}).click(function(){
							tyr.val($(this).text());
							j=-1;
							$("#ttyr").css("visibility","hidden");
						});
						tyr.blur(function(){
							j=-1;
							setTimeout("$('#ttyr').css('visibility','hidden');", 200);	//设置延时隐藏列表的时间，以便有时间让click事件能取得数据
						});
					}
				},"json");
			}else{
				j=-1;
				$("#ttyr").css("visibility","hidden");	//输入框没有内容时隐藏提示框
			}
		}).keydown(function(e){
			if(getkeycode(e)==13) return false;
		});
	});
</script>
</head>
<body>
	<input id="tyr" name="tyr" autocomplete="off" />
	<table id="ttyr" class="gac_m" cellspacing="0" cellpadding="0"></table>
	<input id="ac" name="ac" autocomplete="off" />
</body>
</html>
